<template>
  <div id="app" class="SkTemperatureRecordList">
    <a-card :bordered="false" >
      <slot name="tableHeader"></slot>
      <a-row type="flex" justify="space-between" :gutter="[14, 38]">
        <a-col :span="4">
          <a-card
            class="card-shadow card-radius"
            :bodyStyle="{ padding: '20px' }"
            style="height: 100%;text-align: center;"
          >
            <div class="data-title">
              <p>{{ tableName }}</p>
            </div>
            <div class="data-main">
              <p
                v-for="(item, index) in classList"
                :key="item.id"
                @click="viewData(item,index)"
                :class="classIndex == index ? 'data-active' : ''"
              >
                {{ item.className }}
              </p>
            </div>
          </a-card>
        </a-col>
        <a-col :span="20">
          <a-card class="card-shadow card-radius" :bodyStyle="{ padding: '20px' }">
            <a-row type="flex" justify="space-between">
              <a-col>
                <p>数据更新时间：{{ dataDate }}</p>
              </a-col>
              <a-col>
                <slot name="detailBtn"></slot>
              </a-col>
            </a-row>
            <a-table bordered :columns="columns" :rowKey="rowKey" :data-source="data" :scroll="{ x: 1200, y: 400 }">
              <span slot="temperature" slot-scope="text, record">
                <span :style="{ color: record.isNormal ? '#f00' : '' }">{{ text }}</span>
              </span>
              <span slot="status" slot-scope="text, record">
                <span :style="{ color: record.temperature > threshold ? '#f00' : '' }">
                  {{ record.temperature > threshold ?"体温异常":"正常" }}
                </span>
              </span>
              <span slot="isNormal" slot-scope="text, record">
                <span :style="{ color: text ? '#f00' : '' }">
                  {{ text ? "体温异常 ": "正常" }}
                </span>
              </span>
              <span slot="action" slot-scope="text, record">
                <slot name="actionBtn"></slot>
              </span>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import '@/assets/less/ClassAndCard.less'
import { skClassList } from '@/api/management.js'
export default {
  name: 'SkTemperatureRecordList',
  props:{
    tableName:{
      type:String,
      default:""
    },
    rowKey:{
      type:String,
      default:""
    },
    data:{
      type:Array,
      default:()=>[]
    },
    columns:{
      type:Array,
      default:()=>[]
    },
    threshold:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      classList: [],
      classIndex: 0,
      dataDate:""
    }
  },
  components: {},

  filters: {},

  computed: {},

  created() {
    this.getClassList();
  },

  activated() {},

  mounted() {},

  methods: {
    viewData(data,i) {
      this.classIndex = i;
      let classData = {
        classId:data.id,
        className:data.className
      }
      this.$emit("classData",classData)
    },
    // 获取所有的班级
    getClassList() {
      this.classLoading = true;
      this.dataDate = this.$skCommon.getDate(1);
      skClassList()
        .then(res => {
          if (res.success) {
            this.classList = res.result;
            this.classList.unshift({ className: '全园' })
          } else {
            this.$message.warning(res.message)
          }
          this.classLoading = false;
        })
        .catch(error => {
          console.error(error)
        })
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
